<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<base href="<%=basePath%>">
<html lang="zn-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta name="format-detection" content="telephone=no" />
	<title>ETC卡绑定</title>
	<link rel="stylesheet"href="css/service.css">

	<script type="text/javascript"src="js/jquery.min.js"></script>
	<script type="text/javascript"src="js/base.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript" src="js/handle.js"></script>

	<script type="text/javascript">
		var cardNum;
		var fromPage = "${fromPage}"; // 记录上一个页面

		// 卡有效性检验
		function cardVerify(cardNo) {
			console.log('step into cardVerify()');
			var data = {
				cardNo: cardNo,
				//access_token: access_token
			}
			console.log(data)
			$(".loading").show();
			$(".bindCard").off('click', bindCardHandler);
			$.ajax({
				url:  "<%=basePath%>" + 'card/verifyCardNo',
				type: 'GET',
				dataType: 'json',
				data: data,
				cache: false,
				timeout: 15000,
				success: function (r) {
					console.log(r);
					$(".bindCard").on('click', bindCardHandler);
					$(".loading").hide();

					if (r.respCode != "00") {
						errorToast(r.msg, 3);
						return false;
					}

					var tel = r.tel.substring(0,3) + "****"+ r.tel.substring(r.tel.length-4);
					$(".phone_selected").html(tel).attr('data-tel', r.tel);
					$(".phonelist").html("<li>"+ tel + "</li>");
					$(".inputcardnum").hide();
					$(".checkphone").show();

				},
				error: function (e) {
					$(".bindCard").on('click', bindCardHandler);
					$(".loading").hide();
					ajaxErrorEvent(e);
				}
			});

		}

		// 获取验证码
		function sendCode(tel) {
			console.log('step into sendCode()');

			$(".loading").show();
			var data = {
				phoneNo: tel,
				//access_token: access_token
			};
			console.log(data)
			$.ajax({
				url:   "<%=basePath%>" +'card/getVerifyCode',
				type: 'POST',
				dataType: 'json',
				data: data,
				cache: false,
				timeout: 15000,
				success: function (r) {
					console.log(r);
					if (r.respCode != "00") {
						errorToast(r.msg, 3);
						return false;
					}
					$(".loading").hide();
					$(".tipsbox").show().animate({
						height: "30px"
					}, 200, function() {});;

				},
				error: function (e) {
					$(".loading").hide();
					ajaxErrorEvent(e);
				}
			});
		}

		// 绑卡
		function bindCard(securityCode,cardNo,tel) {
			console.log('step into bindCard()');

			$(".loading").show();
			var data = {
				securityCode: securityCode,
				cardNo:cardNo,
				tel:tel,
				//access_token: access_token
			};
			console.log(data);
			$(".certify").off('click', certifyHandler);

			$.ajax({
				url:  "<%=basePath%>" + 'card/binding',
				type: 'POST',
				dataType: 'json',
				data: data,
				cache: false,
				timeout: 15000,
				success: function (r) {
					console.log(r);

					$(".loading").hide();
					if (r.respCode != "00") {
						errorToast(r.msg, 3);
						$(".certify").on('click', certifyHandler);
						return false;
					}

					$(".checkphone").hide();
					$(".success").show();
				},
				error: function (e) {
					$(".loading").hide();
					$(".certify").on('click', certifyHandler);
					ajaxErrorEvent(e);
				}
			});
		}

		//卡校验事件
		function bindCardHandler(e) {
			$(".cardNumInput").blur();
			var cardNo =  $(".cardNumInput").val().replace(/\D/ig, '');
			if (cardNo.length != 16) {
				errorToast("请输入ETC卡号码后16位",3);
				return false;
			}
			cardNum = cardNo;
			cardVerify(cardNo);
		}
		// 验证码按钮的事件
		function getCodeHandler(e) {
			e.preventDefault();

			// 倒计时结束前 解绑获取验证码按钮的事件
			$(".getCode").off('click',getCodeHandler);

			$(this).addClass('aaa');

			var tel = $(".phone_selected").attr('data-tel');
			sendCode(tel);

			setTime($(".getCode"), 120, function() {
				// 倒计时结束 重新绑定获取验证码按钮的事件
				$(".getCode").removeClass('aaa').on('click',getCodeHandler);
			})
		}
		// 绑卡事件
		function certifyHandler(e) {
			e.preventDefault();
			$(".codeNum").blur();
			var securityCode = $(".codeNum").val();
			var cardNo = cardNum;
			var tel = $(".phone_selected").attr('data-tel');

			if (securityCode.length != 6) {
				errorToast("请输入正确的验证码",3);
				return false;
			}
			bindCard(securityCode,cardNo,tel);
		}

		$(function () {
			//点击手机号下拉框展开
			$(".phone_selected").on('click', function(e) {
				e.preventDefault();
				var height = $(".phonelist li").length * 50;
				$(".phonelist").addClass('phonelist_sliedown').animate({
					height: height+"px"
				}, 200, function() {
					$(".arr_down").addClass('arr_up');
				});

			});

			//点击非下拉框位置时下拉框收起
			$(document).on('click', function(e) {
				var target = e.target;
				if($(target).parents(".phonelist").length != 0 || !$(target).hasClass('phone_selected')){
					$(".phonelist").animate({
						height: "0"
					}, 200, function() {
						$(".arr_down").removeClass('arr_up');
						$(".phonelist").removeClass('phonelist_sliedown')
					});
				}

			});

			//卡号输入时 过滤非数字并用空格分隔
			$(".cardNumInput").on('input', function(e) {
				e.preventDefault();
				var input = $(this).val().replace(/\D/ig, '')
				if(input.length >= 16){
					input = input.substring(0, 16);
				}
				input = input.replace(/(.{4})/g, '$1 ').replace(/\s+$/g, "");
				$(this).val(input);
			});

			//点击绑卡时，进入卡校验流程
			$(".bindCard").on('click', bindCardHandler);

			//验证码输入时，过滤非数字
			$(".codeNum").on('input', function(e) {
				var input = $(this).val().replace(/\D/ig, '');
				$(this).val(input);
			});

			//点击获取验证码时，绑定事件
			$(".getCode").on('click', getCodeHandler);

			//点击验证时，进入绑卡流程
			$(".certify").on('click', certifyHandler);

			//返回卡管理页
			$(".goback").on('touchend', function(e) {
				e.preventDefault();
				if (fromPage == "recharge") {
					// 跳至充值页
					window.location.href = "payment/toRecharge";

				}else if(fromPage == "transfer") {
					// 跳至圈存页
					window.location.href = "transfer/toTransfer";
				}else if(fromPage == "cardlist"){
                    // 跳至充值消费查询的卡列表页
                    window.location.href = "card/toCardListPage";
				}else{
					// 跳至卡列表页
					window.location.href = "card/toBindCardListPage";
				}

			});

		})

	</script>

</head>
<body class="ed">
<div class="wrap">
	<div class="inputcardnum" >
		<img src="img/add_top.png">
		<p>
			3601-
			<input type="tel" placeholder="请输入ETC卡号码后16位" maxlength="19" class="cardNumInput"></p>

		<h2 class="bindCard">确认绑卡</h2>
	</div>

	<div class="checkphone " style="display:none">
		<div class="input_wrap">
			<div class="phonelistbox"> <i>手机号码</i>
				<p class="phone_selected">12345678901</p>
				<ul class="phonelist">
					<li>12345678901</li>
					<li>12345678901</li>
					<li>12345678901</li>
					<li>12345678901</li>
				</ul>
				<span class="arr_down"></span>
			</div>

			<div class="codebox"> <i>验证码</i>

				<input type="tel" class="codeNum" placeholder="请输入验证码" maxlength="6">
				<span class="getCode">获取验证码</span>
			</div>
		</div>
		<div class="tipsbox">
			<p>验证码已发送！</p>
		</div>

		<h3>
			温馨提示：如电话号码有误或需要更新，
			<br/>
			请到营业厅进行更改！
		</h3>
		<h2 class="certify">确认绑卡</h2>
	</div>

	<div class="success" style="display:none">
		<img src="img/add_success.png">
		<p>绑卡成功！</p>
		<h2 class="goback">完成</h2>
	</div>
</div>
<div class="toast toast_timeout" style="display:none">网络异常，请稍后重试！</div>
<div class="toast toast_error" style="display:none">信息输入有误</div>
<div class="loading" style="display:none">
	<img src="img/loading.gif"></div>
</body>
</html>